<template>
  <a-tree-select v-model="value1" @change='change' show-search style="width: 100%" :dropdown-style="{maxHeight: '400px', overflow: 'auto' }" allow-clear
    tree-default-expand-all>
    <a-tree-select-node v-for="(item,index) in treeData" :key="item.dwbm" :title="item.dwmc" :value="item.dwbm">
      <a-tree-select-node v-for="(el,i) in item.children" :key="el.dwbm" :title="el.dwmc" :value="el.dwbm">
        <a-tree-select-node v-for="(ele,i1) in el.children" :key="ele.dwbm" :title="ele.dwmc" :value="ele.dwbm">
        </a-tree-select-node>
      </a-tree-select-node>
    </a-tree-select-node>
  </a-tree-select>
</template>

<script>
export default {
  props: {
    treeData: {
      type: Array,
      default() {
        return [];
      },
    },
    value: {},
  },
  data() {
    return {
      value1: this.value,
    };
  },
  methods: {
    change(e) {
      this.$emit("input", e);
    },
  },
  watch: {
    value: {
      handler(newVal) {
        this.value1 = newVal;
      },
    },
  },
};
</script>

<style lang='less' scoped>
/deep/ .ant-select-selection {
  border: 0;
}
/deep/ .ant-select-tree li .ant-select-tree-node-content-wrapper:hover {
  background-color: rgba(203, 226, 255, 0.6) !important;
}
/deep/.ant-select-tree
  li
  /deep/ .ant-select-tree-node-content-wrapper.ant-select-tree-node-selected {
  background-color: rgba(203, 226, 255, 0.6) !important;
}
</style>